<template>
	<view style="width: 100%;height: 100%;background-color: #ECFDFA;">
		<view class="bj1">
			<span class="sj">订单结算</span>
			
			<view class="jh">
				<view>
					<view style="width: 4px;height: 17px;background-color: #FF6E8F;margin-left: 20px;margin-top: 10px;border-radius: 15px;display: inline-block"></view>
					<span style="margin-left: 12px;font-size: 16px;color: #333333;"><b>订单详情</b></span>
					<u-count-down v-if="time==''" :time="time*1000" format="HH:mm:ss"></u-count-down>
				</view>
				
				<view style="width: 100px;height: 100px;border-radius: 10px;background-color: #000000;margin-top: 10px;margin-left: 15px; display: inline-block">
					<image style="width: 100px;height: 100px;border-radius: 10px;" :src="union.commodity.commodityimgs[0].pash"></image>
				</view>
				<view style="width: 200px;height: 100px;display: inline-block;margin-left: 5px;position: relative;top: -20px;">
					<span style="color: #333333;font-size: 14px;">{{union.commodity.commodityName}}</span>
					<br>
					<span style="color: #333333;font-size: 14px;margin-left: 160px;">{{union.commodity.price}}币</span>
					<br>
					<span style="color: #333333;font-size: 14px;margin-left: 175px;">×{{union.sum}}</span>
					<br>
					<span style="color: #333333;font-size: 15px;color: #FF6E8F;margin-left: 150px;"><b>{{union.price}}币</b></span>
				</view>
				
			</view>
		</view>
		<view class="zong">
			<view>
				<view style="width: 4px;height: 17px;background-color: #FF6E8F;margin-left: 20px;margin-top: 10px;border-radius: 15px;display: inline-block"></view>
				<span style="margin-left: 12px;font-size: 16px;color: #333333;"><b>订单详情</b></span>
			</view>
			
			<view style="width: 300px;height: 30px;margin-left: 5px;margin-top: 20px;background-color: #FFFFFF;">
				<span style="color: #333333;font-size: 14px;"><b>派送方式：</b></span>
				<uni-data-checkbox style="margin-left: 90px;margin-top: -23px;" v-model="pltype" :localdata="range" @change="change"></uni-data-checkbox>
			</view>
			<view v-if="pltype==1" style="width: 325px;height: 30px;margin-left: 5px;margin-top: 10px;background-color: #FFFFFF;">
				<span style="color: #333333;font-size: 14px;"><b>详细地址：</b></span>
				<uni-easyinput type="text" style="width:200px;margin-left: 90px;margin-top: -23px;" v-model="address" placeholder="详细地址" />
				<image @click="getaddress()" src="../../static/scimg/dqwz.png"style="width: 18px;height: 23px;margin-left: 300px;position: relative;top: -30px;"></image>
			</view>
			<view v-if="pltype==1" style="width: 325px;height: 30px;margin-left: 5px;margin-top: 10px;background-color: #FFFFFF;">
				<span style="color: #333333;font-size: 14px;"><b>联系人：</b></span>
				<uni-easyinput type="text" style="width:200px;margin-left: 90px;margin-top: -23px;" v-model="contactsName" placeholder="联系人" />
			</view>
			<view v-if="pltype==2" style="width: 325px;height: 30px;margin-left: 5px;margin-top: 10px;background-color: #FFFFFF;">
				<span style="color: #333333;font-size: 14px;"><b>门店选择：</b></span>
				<uni-easyinput type="text" style="width:200px;margin-left: 90px;margin-top: -23px;" v-model="address" placeholder="门店选择" />
				<image @click="open4()" src="../../static/scimg/dqwz.png"style="width: 18px;height: 23px;margin-left: 300px;position: relative;top: -30px;"></image>
			</view>
			<view v-if="pltype==2" style="width: 325px;height: 30px;margin-left: 5px;margin-top: 10px;background-color: #FFFFFF;">
				<span style="color: #333333;font-size: 14px;"><b>取货人：</b></span>
				<uni-easyinput type="text" style="width:200px;margin-left: 90px;margin-top: -23px;" v-model="contactsName" placeholder="取货人" />
			</view>
			<view style="width: 325px;height: 30px;margin-left: 5px;margin-top: 10px;background-color: #FFFFFF;">
				<span style="color: #333333;font-size: 14px;"><b>联系电话：</b></span>
				<uni-easyinput type="text" style="width:200px;margin-left: 90px;margin-top: -23px;" v-model="phone" placeholder="联系电话" />
			</view>
			<view style="width: 325px;height: 30px;margin-left: 5px;margin-top: 10px;background-color: #FFFFFF;">
				<span style="color: #333333;font-size: 14px;"><b>备注：</b></span>
				<uni-easyinput type="text" style="width:200px;margin-left: 90px;margin-top: -23px;" v-model="remarks" placeholder="备注" />
			</view>
			<view style="width: 325px;height: 30px;margin-left: 5px;margin-top: 10px;background-color: #FFFFFF;">
				<span style="color: #333333;font-size: 14px;"><b>配送费：</b></span>
				<span style="font-size: 15px;color: #FF6E8F;margin-left: 220px;"><b>{{ps}}币</b></span>
			</view>
			<view style="width: 325px;height: 30px;margin-left: 5px;margin-top: 10px;background-color: #FFFFFF;">
				<span style="color: #333333;font-size: 14px;"><b>合计：</b></span>
				<span style="font-size: 15px;color: #FF6E8F;margin-left: 220px;"><b>{{ps+union.commodity.price}}币</b></span>
			</view>
		</view>
		<u-button @click="open2" color="#5AEAD7" style="width: 250px;height: 35px;border-radius: 20px;margin-top: 140px;" text="立即付款"></u-button>
		
		<uni-popup ref="popup2" :mask-click="false">
			<view style="width: 100%;height: 400px;background-color: #FFFFFF;">
				<view style="width: 100%;height: 40px;background-color: #FFFFFF;border-bottom: 1px  solid #C7C7C7;">
					<span style="color: #333333;font-size: 14px;margin-left: 160px;"><b>确定支付</b></span>
					<view @click="close2" style="margin-left: 320px;position: relative;top: -20px;"><image src="../../static/scimg/cuohao.png" style="width: 35px;height: 35px;"></image></view>
				</view>
				<view style="width: 100%;height: 30px;margin-left: 165px;margin-top: 20px;"><span style="color: #FF6E8F;font-size: 16px;"><b>{{union.commodity.price}}币</b></span></view>
				<view style="width: 100%;height: 30px;margin-left: 20px;margin-top: 20px;">
					<span style="color: #000000;font-size: 15px;"><b>订单信息：</b></span>
					<span style="color: #333333;font-size: 15px;margin-left: 50px;">{{union.sptype}}{{union.commodity.commodityName}}</span>
				</view>
				<view style="width: 100%;height: 30px;margin-left: 20px;margin-top: 20px;">
					<span style="color: #000000;font-size: 15px;"><b>派送方式：</b></span>
					<span v-if="pltype==1" style="color: #333333;font-size: 15px;margin-left: 50px;">送货上门</span>
					<span v-if="pltype==2" style="color: #333333;font-size: 15px;margin-left: 50px;">门店自提</span>
				</view>
				
				<u-button @click="open3" color="#5AEAD7" style="width: 250px;height: 35px;border-radius: 20px;margin-top: 70px;" text="立即支付"></u-button>
			</view>
		</uni-popup>
		
		<uni-popup ref="popup3" :mask-click="false">
			<view style="width: 300px;height: 250px;background-color: #FFFFFF;border-radius: 20px;">
				<u-code-input v-model="password" space="5" :maxlength="6" mode="box" dot style="margin-left: 25px;position: relative;top:25px"></u-code-input>
				
				<span style="color: #E43D33;font-size: 15px;margin-left:20px;position: relative;top: 30px;">{{mar}}</span>
				<u-button @click="zhifu" color="#5AEAD7" style="width: 250px;height: 35px;border-radius: 20px;margin-top: 90px;" text="立即支付"></u-button>
				<u-button @click="close3" color="#5AEAD7" style="width: 250px;height: 35px;border-radius: 20px;margin-top: 10px;" text="取消"></u-button>
			</view>
		</uni-popup>
		<uni-popup ref="popup4" :mask-click="false">
			<view style="width: 100%;height: 400px;background-color: #FFFFFF;">
				<view class="map">
					  <map id="my_test_map"  style="width: 750rpx; height: 540upx;"  :include-points='get_address'  @markertap="check_market" :circles="circles"   :scale="scale" @regionchange="regionchange" :markers='markers' :latitude="center_lat" :longitude="center_lng" >
					  </map>
					  
					 
				 
					  <button @click="change_markers">变更</button>
				</view>
				
				
			</view>
		</uni-popup>
		

	</view>
</template>

<script>
	export default {
		data() {
			return {
				commodityid:0,
				union:{},
				range: [{"value": 1,"text": "送货上门"	},{"value": 2,"text": "门店自提"}],
				pltype:1,
				address:'',
				ps:20,
				contactsName:'',
				phone:'',
				remarks:'',
				password:'',
				storeId:0,
				stores:[],
				userid:'',
				time:'',
				latitude:'',
				longitude:'',
				mar:'',
				
				id:'ybus_map',
			    center_lat: 34.252109,
				center_lng: 108.840866,  
				markers:[
					{
						 id:'begin',
						 latitude: 34.252109,
							longitude:  108.840866, 
							iconPath:"../../static//map_getaddress.png",
						 width:50,
						 height:50
					}
				],
				scale:15,
				get_address:[
				],
				circles:[
					// {//在地图上显示圆
					//  　　latitude: 34.252109,
					//  　　longitude: 108.840866,
					//  　　fillColor:"#e6060a6A",//填充颜色
					// 　　 color:"#e6060a6A",//描边的颜色
					//  　　radius:300,//半径
					// 　　 strokeWidth:2//描边的宽度
					//  }
				]


			}
		},
		onLoad (option) {
			this.union=JSON.parse(decodeURIComponent(option.union))
			console.log(JSON.parse(decodeURIComponent(option.union)))
			this.initmd()
			// this.change_markers()
			this.getJW()
		},
		methods: {
			getJW() {
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					success: (res) => {
						console.log(res)
						this.center_lng = res.longitude
						this.center_lat = res.latitude
						this.change_markers()
			
					}
				})
			
			},
			zhifu(){
				uni.request({
						url:'http://localhost:9525/xkuser/ljp/zhifu',
						method: 'POST',
					   data: {
						   deliveryMethod:this.pltype,
						   quantity:this.union.sum,
						   price:this.union.price,
						   address:this.address,
						   contactsName:this.contactsName,
						   phone:this.phone,
						   remarks:this.remarks,
						   distributionfee:this.ps,
						   total:this.union.price+this.ps,
						   commodityId:this.union.commodity.commodityId,
						   storeId:this.storeId,
						   userId:this.userid,
						   password:this.password,
						   selectionId:this.union.sptypeid
					   },
					   dataType:'json',
					   success: (res) => {
							// var result = JSON.parse(res.data.data.message);
							var result = res.data.message;
							console.log(res)
							if(res.data.message=="成功"){
								console.log(res)
								// uni.navigateTo({
								// 	url:'/pages/shangcheng/shoppingmall'
								// })
								this.$router.push({path:"/pages/shangcheng/shoppingmall"})
							}else{
								this.mar=res.data.message
							}
							
							
								
						},
					})
			},
			initmd(){
				
				uni.getStorage({
					key:'userid',
					success: res=>{
						this.userid=res.data
					}
				})
				
				uni.request({
						url:'http://localhost:9525/xkuser/ljp/initmd',
						method: 'GET',
					   data: {
						   commodityid:this.union.commodity.commodityId,
						   type:this.union.sptypeid
					   },
					   dataType:'json',
					   success: (res) => {
							// var result = JSON.parse(res.data.data.message);
							var result = res.data.message;
							console.log(res)
							
							this.stores=res.data.data.stores
							console.log(1111111111111111111111)
							
								
						},
					})
			},
			open4() {
				this.$refs.popup4.open('bottom')
			},
			close4() {
				this.$refs.popup4.close()
			},
			open3() {
				this.$refs.popup3.open('center')
			},
			close3() {
				this.$refs.popup3.close()
			},
			open2() {
				this.$refs.popup2.open('bottom')
			},
			close2() {
				uni.request({
						url:'http://localhost:9525/xkuser/ljp/temporaryorder',
						method: 'POST',
					   data: {
						   deliveryMethod:this.pltype,
						   quantity:this.union.sum,
						   price:this.union.price,
						   address:this.address,
						   contactsName:this.contactsName,
						   phone:this.phone,
						   remarks:this.remarks,
						   distributionfee:this.ps,
						   total:this.union.price+this.ps,
						   commodityId:this.union.commodity.commodityId,
						   storeId:this.storeId,
						   userId:this.userid,
						   coLatitude:this.latitude,
						   coLongitude:this.longitude,
					   },
					   dataType:'json',
					   success: (res) => {
							// var result = JSON.parse(res.data.data.message);
							var result = res.data.message;
							console.log(res.data.data.time)
							this.time=res.data.data.time
							
								
						},
					})
				this.$refs.popup2.close()
			},
			getaddressmd(){
				uni.chooseLocation({
					success: function (res) {
						console.log('位置名称：' + res.name);
						console.log('详细地址：' + res.address);
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);
					}
				});
			},
			getaddress(){
				
				uni.getLocation({
					success: function (res) {
						console.log('位置名称：' + res.name);
						console.log('详细地址：' + res.address);
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);
						this.address=res.address
						this.latitude=res.latitude
						this.longitude=res.longitude
					}
				});
			},
			
			
			change_markers(){
					console.log("开始执行地图标注");
					 
					 
					 for (var i = 0; i < this.stores.length; i++) {
								var a = {
					 
									id: "shop-" + this.stores[i].id,
									latitude: this.stores[i].storeLatitude,
									longitude: this.stores[i].storeLongitude,
									iconPath: "../../static/mapshop.png",
									width: 50,
									height: 50,
								}
								begin_markers.push(a)
					 
							}
							console.log("开始执行地图标注");
							console.log(begin_markers)
							var now_address = [{
								id: this.userid,
								latitude: this.center_lat,
								longitude: this.center_lng,
								iconPath: "../../static/mapshopyuan.png",
								width: 50,
								height: 50
							}]
							//获取地图
							this.markers = now_address.concat(begin_markers);
					 
							// this.circles = [{ //在地图上显示圆
							// 	latitude: this.center_lat,
							// 	longitude: this.center_lng,
							// 	fillColor: "#9db0de6A", //填充颜色
							// 	color: "#00aaff", //描边的颜色
							// 	radius: 100, //半径
							// 	strokeWidth: 1 //描边的宽度
							// }]
							//缩放视野以包含所有给定的坐标点
							this.get_address = [{
								latitude: this.center_lat,
								longitude: this.center_lng,
							}]
							 
							 	
							 
						},
						// 拖拽地图
						regionchange(e){
							console.log(e);
							
							var  _that= this;
							_that.mainmap=uni.createMapContext('my_test_map',this);
							_that.mainmap.getCenterLocation({
											   success(res) {   
													var lat= res.latitude
													var lng= res.longitude  
													console.log(lat);
													console.log(lng);
													//重设标记点
													_that.mainmap.translateMarker({
														markerId:'begin',
														destination:{
													     	latitude: lat,
														    longitude: lng
														}, 
														 duration:350,
														  animationEnd(){
															 console.log('设置');
														 }
													})
											   }  
							  }) 
							
						},
						//点击标记
									check_market(e){
										console.log(e.detail);
									}

			
			
			
			
		}
	}
</script>

<style>
	.map{
		 width: 100%;
		 
	 }
	.zong{
		width: 335px;
		height: 350px;
		background-color: #FFFFFF;
		border-radius: 10px;
		position: relative;
		top: 10px;
		left: 20px;
		
	}
	.jh{
		width: 335px;
		height: 150px;
		background-color: #FFFFFF;
		border-radius: 10px;
		position: absolute;
		top: 85px;
		left: 20px;
		/* opacity: 0.6; */
		/* background-color: rgba(255, 255, 255, 0.5); */
		
	}
	.ss{
		width: 25px;
		height: 25px;
		/* background-image: url(../../static/img/fenlei.png); */
		/* background-color: #000000; */
		margin-left: 330px;
		position: absolute;
		top: 22px;
		
	}
	.fl{
		width: 25px;
		height: 25px;
		/* background-image: url(../../static/img/fenlei.png); */
		/* background-color: #000000; */
		margin-left: 280px;
		position: absolute;
		top: 20px;
		
	}
	.sj{
		font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
		    font-weight: 700;
		    font-size: 20px;
		    color: #FFFFFF;
		    margin-left: 15px;
			position: absolute;
			top: 20px;
	}
	
	.bj1{
		width:100%;
		height:468rpx;
		background-image: url(../../static/indeimg/xia.png);
		
	}
</style>
